
<template>
  <view style="padding-top: 50rpx">
    <view class="nav-list">
      <view
        class="nav-li"
        hover-class="hoverBtn"
        style="color: #ffffff"
        :style="{ 'background-color': item.color }"
        v-for="item in baseFunList"
        :key="item.cuIcon"
        @click="fnJumpPage(item)"
      >
        <view>{{ item.title }}</view>
        <view class="nav-name">{{ item.describe }}</view>
        <text :class="'cuIcon-' + item.cuIcon"></text>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  onLoad() {},
  data() {
    return {
      count: 0,
      baseFunList: [
        {
          title: "倒计时",
          name: "/pages/countDown",
          color: "#6739b6",
          describe: "计时",
        },
        {
          title: "烟花效果",
          name: "/pages/fireworks",
          color: "#e54d42",
          describe: "烟花",
        },
        {
          title: "代码背景",
          name: "/pages/codeBg",
          color: "#fbbd08",
          describe: "代码",
        },
         {
          title: "滚动文字",
          name: "/pages/scrollText",
          color: "#f37b1d",
          describe: "滚动",
        },
      ],
      color: [
        "#6739b6",
        "#e03997",
        "#e54d42",
        "#8799a3",
        "#fbbd08",
        "#f37b1d",
        "#39b54a",
        "#a5673f",
        "#8dc63f",
        "#0081ff",
        "#1cbbb4",
        "#6739b6",
        "#e03997",
        "#e54d42",
        "#8799a3",
        "#fbbd08",
        "#f37b1d",
        "#39b54a",
        "#1cbbb4",
        "#a5673f",
        "#8dc63f",
        "#0081ff",
        "#1cbbb4",
      ],
    };
  },
  methods: {
    fnJumpPage(item) {
      const { name } = item;
      // 进入下一页
      uni.navigateTo({
        url: name,
      });
    },
  },
};
</script>